<!-- 我的主页 -->
<template>
  <a-page-header
    :style="{ background: 'var(--color-bg-2)' }"
    @back="back"
    title="我的主页"
  >
  </a-page-header>
  <div class="wrap">
    <a-scrollbar style="height: calc(100vh - 62px); overflow: auto">
      <div class="wrap-header">
        <a-space direction="vertical" fill :size="0">
          <div @mouseover="handleMouseOver" @mouseleave="handleMouseLeave">
            <a-image
              width="100%"
              :height="300"
              :preview="false"
              src="https://files.axshare.com/gsc/SVXEBF/46/89/28/468928a52e534a9e840322e4c67aa413/images/%E6%88%91%E7%9A%84%E4%B8%BB%E9%A1%B5/u497209.png"
            />

            <a-upload action="/">
              <template #upload-button>
                <a-button class="upload-carousel" v-show="isShowUploadCarousel">
                  <template #icon>
                    <IconFont type="icon-xiangji" :size="23"></IconFont>
                  </template>
                  上传封面图片</a-button
                >
              </template>
            </a-upload>
          </div>

          <div
            style="display: flex; height: 200px; justify-content: space-between"
          >
            <a-image
              class="avatar"
              width="190"
              height="190"
              src="https://files.axshare.com/gsc/SVXEBF/46/89/28/468928a52e534a9e840322e4c67aa413/images/%E6%88%91%E7%9A%84%E4%B8%BB%E9%A1%B5/u497213.png"
            />
            <div class="info">
              <a-descriptions :data="userInfo" :column="1" size="mini">
                <template #title>
                  <h2>King</h2>
                </template>
              </a-descriptions>
              <div style="cursor: pointer">
                <IconFont type="icon-down" :size="16"></IconFont>
                <span style="color: #165dff; margin-left: 5px"
                  >查看详细资料</span
                >
              </div>
            </div>
            <a-button type="outline" class="editInfoBtn">编辑个人资料</a-button>
          </div>
        </a-space>
      </div>

      <div class="wrap-content">
        <a-layout>
          <a-layout>
            <a-layout-content style="padding: 0 20px">
              <a-tabs lazy-load :default-active-key="1">
                <a-tab-pane
                  v-for="item in tabs"
                  :key="item.key"
                  :title="item.title"
                >
                  <a-scrollbar
                    style="height: 600px; overflow: auto"
                    id="contentScroll"
                  >
                    <DynamicState v-if="item.key === 1" />
                    <Comment v-else-if="item.key === 2" />
                    <Video v-else-if="item.key === 3" />
                    <Article v-else-if="item.key === 4" />
                    <Collection v-else-if="item.key === 5" />
                    <Follow v-else-if="item.key === 6" />
                  </a-scrollbar>
                  <a-back-top
                    target-container="#contentScroll"
                    :style="{ position: 'absolute' }"
                  />
                </a-tab-pane>
              </a-tabs>
            </a-layout-content>
            <a-layout-sider :width="300" class="wrap-sider">
              <a-card>
                <template #title>
                  <IconFont type="icon-user-pen" :size="20"></IconFont>

                  <span style="margin-left: 10px">创作中心</span>
                </template>
                <template #extra>
                  <span>草稿箱(0)</span>
                </template>
                <div style="display: flex; justify-content: space-around">
                  <div>
                    <a-avatar
                      style="
                        background-color: #dceafe;
                        margin-bottom: 10px;
                        cursor: pointer;
                      "
                      @click="dynamicStateVisible = true"
                    >
                      <IconFont type="icon-tianxie" :size="20"></IconFont>
                    </a-avatar>
                    <div>写动态</div>
                  </div>
                  <div>
                    <a-avatar
                      style="
                        background-color: #ffefde;
                        margin-bottom: 10px;
                        cursor: pointer;
                      "
                      @click="
                        router.push({
                          name: 'MyVideo'
                        })
                      "
                    >
                      <IconFont type="icon-video" :size="20"></IconFont>
                    </a-avatar>
                    <div>发视频</div>
                  </div>
                  <div>
                    <a-avatar
                      style="
                        background-color: #e2f6f6;
                        margin-bottom: 10px;
                        cursor: pointer;
                      "
                      @click="
                        router.push({
                          name: 'MyArticle'
                        })
                      "
                    >
                      <IconFont
                        type="icon-a-icon_Articleclassification"
                        :size="20"
                      ></IconFont>
                    </a-avatar>
                    <div>写文章</div>
                  </div>
                </div>
              </a-card>

              <a-list style="margin-top: 20px">
                <a-list-item>
                  <div style="display: flex; justify-content: space-around">
                    <a-space direction="vertical">
                      <span>关注</span>
                      <span>724</span>
                    </a-space>
                    <a-space direction="vertical">
                      <span>粉丝</span>
                      <span>23</span>
                    </a-space>
                  </div>
                </a-list-item>
              </a-list>

              <a-list style="margin-top: 20px" size="large">
                <a-list-item
                  >关注的动态
                  <template #actions>
                    <span>23</span>
                  </template>
                </a-list-item>
                <a-list-item
                  >关注的评论
                  <template #actions>
                    <span>16</span>
                  </template>
                </a-list-item>
                <a-list-item
                  >关注的文章
                  <template #actions>
                    <span>202</span>
                  </template>
                </a-list-item>
                <a-list-item
                  >关注的视频
                  <template #actions>
                    <span>5</span>
                  </template>
                </a-list-item>
              </a-list>
            </a-layout-sider>
          </a-layout>
        </a-layout>
      </div>
    </a-scrollbar>
  </div>
  <DynamicStateModal v-model:visible="dynamicStateVisible"></DynamicStateModal>
</template>
<script setup lang="ts">
import Article from './Tabs/Article/index.vue';
import Collection from './Tabs/Collection/index.vue';
import Comment from './Tabs/Comment/index.vue';
import DynamicState from './Tabs/DynamicState/index.vue';
import Follow from './Tabs/Follow/index.vue';
import Video from './Tabs/Video/index.vue';
import DynamicStateModal from './Components/DynamicStateModal/index.vue';

const router = useRouter();

let isShowUploadCarousel = ref(false); //是否显示上传封面图片
const handleMouseOver = () => {
  isShowUploadCarousel.value = true;
  console.log(111);
};

const handleMouseLeave = () => {
  isShowUploadCarousel.value = false;
  console.log(111);
};

const back = () => {
  router.back();
};

// 用户信息
const userInfo = [
  {
    label: 'Name',
    value: 'Socrates'
  },
  {
    label: 'Mobile',
    value: '123-1234-1234'
  },
  {
    label: 'Residence',
    value: 'Beijing'
  },
  {
    label: 'Hometown',
    value: 'Beijing'
  },
  {
    label: 'Address',
    value: 'Yingdu Building, Zhichun Road, Beijing'
  }
];

const tabs = ref([
  {
    key: 1,
    title: '动态',
    value: null
  },
  {
    key: 2,
    title: '评论',
    value: 2525
  },
  {
    key: 3,
    title: '视频',
    value: 100
  },
  {
    key: 4,
    title: '文章',
    value: 52
  },
  {
    key: 5,
    title: '收藏',
    value: 353
  },
  {
    key: 6,
    title: '关注',
    value: null
  }
]);

let dynamicStateVisible = ref(false);
</script>
<style lang="less" scoped>
.wrap {
  position: relative;
  left: 20%;
  width: 60%;
  min-width: 600px;
  // background-color: pink;

  &-header {
    position: relative;
    border: 1px solid #ccc;
    height: 500px;
    border-radius: 10px;

    .upload-carousel {
      position: absolute;
      right: 50px;
      top: 20px;
      background-color: rgba(51, 51, 51, 0.1);
      border-radius: 4px;
      border-color: rgba(242, 242, 242, 1);
      color: #ffffff75;
      width: 169px;
      height: 52px;
    }
    .avatar {
      position: absolute;
      top: 280px;
      left: 50px;
      border-radius: 10px;
    }

    .info {
      position: relative;
      // width: 300px;
      left: 300px;
      bottom: 30px;
    }

    .editInfoBtn {
      position: relative;
      top: 130px;
      right: 20px;
    }
  }

  &-content {
    margin-top: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
  }

  &-sider {
    padding: 10px;
  }
  :deep(.arco-card-header) {
    border-bottom: none;
  }
}
</style>
